<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>个人中心</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <style>
        html,
        body {
            width: 100%;
            min-height: 100%;
            background: #f2efed;
            line-height: 1;
        }

        .mail_list {
            /*padding-top: 71px;*/
        }
        /*固定头部*/

        .header {
            position: fixed!important;
            background-color: #fff;
            border: none!important;
        }
        /*修改头部标题*/

        .header_title {
            font-size: 0.9rem;
            font-weight: bold;
        }
        /*头部右侧图标（图片）  */

        .header_right_img {
            width: 1rem;
        }
        /*搜索按钮*/

        .search_box {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0.45rem 0.75rem;
            background-color: #fff;
            padding: 0.4rem 0;
            border-radius: 0.1rem;
        }

        .search_box img {
            width: 0.625rem;
            margin-right: 0.25rem;
        }

        .search_box span {
            font-size: 0.7rem;
            color: #999;
        }

        .mail_list {
            padding-top: 71px;
        }

        .contacts_info_list {
            display: flex;
            align-items: center;
            background-color: #fff;
            padding: 0.5rem 0;
            position: relative;
        }

        .contacts_info_list::after {
            content: "";
            height: 1px;
            width: calc(100% - 0.75rem);
            position: absolute;
            background: #edeae8;
            bottom: 0;
            left: 0.75rem;
        }

        .contacts_info_list:last-child:after {
            height: 0;
        }

        .contacts_info_list img {
            width: 1.5rem;
            margin: 0rem 0.75rem;
        }
        /*联系人列表*/
        /*弹出的字母框*/

        #letter {
            width: 3rem;
            height: 3rem;
            border-radius: 50%;
            font-size: 2.5rem;
            color: #fff;
            text-align: center;
            line-height: 3rem;
            background: rgba(0, 0, 0, .5);
            position: fixed;
            left: 50%;
            top: 50%;
            margin: -50px 0 0 -50px;
            z-index: 99;
            display: none
        }

        #letter img {
            width: 2.5rem;
            height: 2.5rem;
            float: left;
            margin: 1.25rem 0 0 1.25rem;
        }
        /*列表*/

        .sort_box {
            margin: 0;
        }

        .sort_list {
            padding: 0.45rem 0;
            background-color: #fff;
            display: flex;
            align-items: center;
            position: relative;
        }

        .sort_list::after {
            content: "";
            height: 1px;
            width: calc(100% - 0.75rem);
            position: absolute;
            background: #edeae8;
            bottom: 0;
            left: 0.75rem;
        }

        .sort_list .num_logo {
            width: 1.5rem;
            margin: 0rem 0.75rem;
        }

        .sort_list .num_name {
            font-size: 0.8rem;
            color: #333;
        }

        .sort_letter {
            padding: 0.5rem 0rem;
            margin-left: 0.75rem;
            font-size: 0.7rem;
            color: #666666;
        }
        /*字母列表*/

        .initials {
            position: fixed;
            top: 47px;
            right: 0;
            height: 100%;
            width: 15px;
            padding-right: 10px;
            text-align: center;
            font-size: 12px;
            z-index: 99;
            background: transparent!important;
        }

        .indexes_list {
            position: absolute;
            top: 50%;
            right: 0.45rem;
            transform: translateY(-50%);
        }

        .indexes_list li {
            list-style: none;
            height: 0.6rem!important;
            font-size: 0.5rem;
            color: #999999;
        }
    </style>
</head>

<body>

    <header class="aui-bar aui-bar-nav header" id='header' style="padding-top:25px;">
        <div class="aui-title header_title">通讯录</div>
        <a class="aui-pull-right aui-btn aui-btn-outlined" onclick="open_new_win2('one','添加新的朋友','','')">
            <img src="../../image/four/add_friend.png" alt="" class="header_right_img">
        </a>
    </header>

    <div id="app" v-cloak>

        <div class="mail_list" onclick="open_search_win()">
            <div class="search_box">
                <img src="../../image/four/search.png" alt="">
                <span>搜索</span>
            </div>
        </div>



        <!-- 添加朋友 群聊 -->
        <div class="contacts_box">
            <ul class="contacts_list_box">
                <li class="contacts_list">
                    <ul class="contacts_info_box">
                        <li class="contacts_info_list" @click="open_new_win('two','新的朋友','等待好友','../../../image/four/add_friend.png')">
                            <img src="../../image/four/new_friend.png" alt="">
                            <span class="user_name">新的朋友</span>
                        </li>
                        <li class="contacts_info_list" @click="open_new_win('one','我的群聊','群聊','')">
                            <img src="../../image/four/ql.png" alt="">
                            <span class="user_name">群聊</span>
                        </li>
                        <li class="contacts_info_list" @click="open_new_win('one','手机通讯录','邀请好友','')">
                            <img src="../../image/four/phone_mail.png" alt="">
                            <span class="user_name">手机通讯录</span>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>


        <!-- 联系人列表 -->
        <div id="letter"></div>
        <div class="sort_box">
            <div v-for="friend_info in data" class="sort_list" @click="open_new_win('two','详细资料','好友','../../../image/four/delete_friend.png',friend_info.user_id)">
                <div class="num_logo">
                    <div :style="'background:url('+friend_info.head_img+') center/cover no-repeat;width:1.5rem;height:1.5rem;'"></div>
                </div>
                <div v-if="friend_info.username" class="num_name">{{friend_info.username}}</div>
                <div v-else class="num_name">该用户很懒，没有填写名字</div>
            </div>
        </div>
        <div class="initials">
            <ul class="indexes_list">

            </ul>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/jquery.charfirst.pinyin.js"></script>
<script type="text/javascript" src="../../script/sort.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript">
    apiready = function() {

        //获取header的高度
        var oHeader = $api.byId("header");
        var headerH = $api.offset(oHeader).h;

        // 搜索框添加上边距 防止和头部重叠
        $('.mail_list').css('padding-top', headerH);
        // 获取搜索框的高度
        var searchH = $('.search_box').outerHeight(true);

        api.showProgress({
            title: '努力加载中...',
            text: '先喝杯茶...',
            modal: false
        });

        var app = new Vue({
            el: '#app',
            data: {
                token: '',
                groupchat_id: '',
                data: [],
            },
            created: function() {
                var $_this = this;
                $_this.token = $api.getStorage('token') || toString('')
                api.ajax({
                    url: window.Url.Community_friendList,
                    method: 'post',
                    data: {
                        values: {
                            token: $_this.token,
                            groupchat_id: $_this.groupchat_id
                        }
                    }
                }, function(ret, err) {
                    if (ret) {
                        // console.log(JSON.stringify(ret))
                        if (ret.re == 1) {
                            // $_this.data = err.data
                            for (var i = 0; i < ret.data.list.length; i++) {
                                $_this.data = $_this.data.concat(ret.data.list[i].userlist);
                            }
                            // console.log('整合后的好友列表数据---'+JSON.stringify($_this.data))

                            $_this.$nextTick(function() {
                                list_paixu();
                            })
                        }
                    } else {
                        api.alert({
                            msg: JSON.stringify(err)
                        });
                    }
                })
            },
            mounted: function() {
              var $_this = this;
              api.hideProgress();
            },
            methods: {
                // 打开对应页面的头部
                open_new_win: function(index, title, type, img_src, friend_id) {
                    api.openWin({
                        name: 'four_' + index + "_header",
                        url: './four_headers/four_' + index + '_header.html',
                        pageParam: {
                            title: title,
                            type: type,
                            img_src: img_src,
                            friend_id: friend_id
                        }
                    });
                }
            }
        })

    };




    // 打开对应页面的头部
    function open_new_win2(index, title, type, img_src) {
        api.openWin({
            name: 'four_' + index + "header",
            url: './four_headers/four_' + index + '_header.html',
            pageParam: {
                title: title,
                type: type,
                img_src: img_src
            }
        });
    }


    // 打开搜索窗口
    function open_search_win() {
        api.openWin({
            name: 'search_one_header',
            url: 'four_headers/search_one_header.html',
            pageParam: {
                name: 'test'
            }
        });

    }
</script>

</html>
